<template>
  <!-- 联动事件查询-实时视频详情页-右侧视频 -->
  <div class="right-video">
    <div id="linkageEventQueryVideo"></div>
  </div>
</template>

<script lang="ts">
import { Component, Watch, Vue, Prop } from "vue-property-decorator";
import PreviewOCX from "@/utils/PreviewClass.js";
@Component
export default class extends Vue {
  @Prop() datas: any[];
  PreviewOCX: any = null;
  mounted() {
    let ocx = this.init();
    ocx.setWindowsLayout(2);
    ocx.setTokenCallEvent(this.tokenCallEvent.bind(this));
    ocx.setCallBack();
  }

  // 初始化视频插件
  init() {
    let ocx = (this.PreviewOCX = new (PreviewOCX as any)({
      divId: "linkageEventQueryVideo",
      theme: "",
    }));
    return ocx;
  }

  @Watch("datas", { deep: true })
  setPreview(datas) {
    let ocx = this.PreviewOCX;
    console.log(ocx.windowNumber);
    let list = this.datas.slice(0, ocx.windowNumber);
    list.forEach((v) => {
      var params = {
        indexCode: v.videoCode,
        stationId: v.stationId,
      };
      this.getPreview(params);
    });
  }
  // 获取视频流
  async getPreview(data) {
    // let data = {
    //   indexCode: "001246",
    //   stationId: "100435539",
    // };
    // console.log(data);

    await (this as any).$services
      .getPreview({ data, dataType: "text" })
      .then((xml: any) => {
        // if (xml) {
        let ocx = this.PreviewOCX;
        var winindex = ocx.getSelectWindow();
        // console.log(
        //   "winindex:" + winindex,
        //   "ocx.startPreview(winindex, xml):" + ocx.startPreview(winindex, xml)
        // );
        if (ocx.startPreview(winindex, xml) === 0) {
          if (ocx.setSelectWindow(winindex + 1) === -1) {
            ocx.setSelectWindow(0);
          }
        }
        // } else {
        //   this.$message.warning("没有找到对应的播放点！");
        // }
        return true;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  tokenCallEvent(reqID) {
    let data = {
      // stationId: "100435539",
      stationId: this.datas[0].stationId,
    };
    (this as any).$services
      .getTokens({ data, dataType: "text" })
      .then((result: any) => {
        // console.log(123, result);
        this.PreviewOCX.setToken(reqID, result);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
}
</script>

<style lang="scss" scoped>
.right-video {
  width: 100%;
  height: 100%;
  >div{
    width: 100%;
  height: 100%;
  }
}
</style>